<template>
    <div class="myPublish-container">
        <!-- 面包屑 -->
        <Breadcrumb>
            <BreadcrumbItem to="/userHome">个人中心</BreadcrumbItem>
            <BreadcrumbItem>订单管理</BreadcrumbItem>
        </Breadcrumb>
        <div class="myPublish-info">
            <Tabs value="name1">
                <!-- 我卖出的列表 -->
                <TabPane label="我卖出的" name="name1">
                    <div class="myPublish-list" v-if="sellList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <div class="myPublish-list" v-if="sellList">
                        <div class="myPublish-item" v-for="item in sellList" :key="item.oId">
                            <!-- 订单信息 -->
                            <div class="userinfo-order">
                                <div class="userinfo">
                                    <span>订单编号：{{item.oOrderNum}}</span>
                                </div>
                                <div class="order-status" v-if="item.oOrderStatus==2">
                                    <span class="order-status">已付款</span>
                                </div>
                                <div class="order-status" v-else-if="item.oOrderStatus==1">
                                    <span class="order-status">未付款</span>
                                </div>
                            </div>
                            <!-- 商品价格区域 -->
                            <div class="goodsinfo-price">
                                <div class="goodsinfo">
                                    <router-link :to="'/goodsInfo/' + item.goods.gId"><img :src="item.mainPic" alt=""></router-link>
                                    <router-link :to="'/goodsInfo/' + item.goods.gId" class="title">{{item.goods.gTitle}}</router-link>
                                </div>
                                <div class="realy-price">
                                    <span>实收款：<span class="price">￥{{item.oTotalAmount}}</span></span>
                                </div>
                            </div>
                            <!-- 联系买家 -->
                            <div class="info-place">
                                <router-link :to="'/addPrivateMsg/' + item.oUid + '/' + item.oGid"><Icon type="ios-chatbubbles" /> 联系买家</router-link>
                                <div class="order-place">
                                    <a  :href="'http://localhost:8080/alipay/pay?orderNo=' + item.oParentNo + '&price=' + item.oTotalAmount" class="status" v-if="item.oOrderStatus==1">去付款</a>
                                    <a href="javascript:void(0);" class="detail" @click.prevent="findOrderDetail(item.oId)">查看详情</a>
                                    <Dropdown>
                                        <a href="javascript:void(0)">
                                            <Icon type="ios-arrow-down"></Icon>
                                        </a>
                                        <DropdownMenu slot="list">
                                            <DropdownItem>退款详情</DropdownItem>
                                            <DropdownItem>取消订单</DropdownItem>
                                        </DropdownMenu>
                                    </Dropdown>
                                </div>
                            </div>
                            <!-- 订单详情 -->
                            <Modal
                                v-model="modal1"
                                title="订单详情">
                                <div class="order-info">
                                    <h6>订单信息</h6>
                                    <div class="order-detail">
                                        <p>订单编号：{{orderDetail.oOrderNum}}</p>
                                        <p>收货人：
                                            <span class="pad">{{addrDetail.raFullname}}</span>
                                            <span class="pad">{{addrDetail.raPhone}}</span>
                                            <span>{{addrDetail.raAddr}}</span>
                                        </p>
                                        <p v-if="orderDetail.oOrderStatus==2">订单状态：已付款</p>
                                        <p v-if="orderDetail.oOrderStatus==1">订单状态：未付款</p>
                                        <p>创建时间：{{orderDetail.oCreateTime | dataFormat}}</p>
                                        <p v-if="orderDetail.oPayTime!=''">支付时间：{{orderDetail.oPayTime}}</p>
                                        <p>备注信息：{{orderDetail.oRemark}}</p>
                                    </div>
                                </div>
                                <div class="order-info">
                                    <h6>商品信息</h6>
                                    <div class="goodsinfo-price">
                                        <div class="goodsinfo">
                                            <router-link :to="'/goodsInfo/' + orderDetail.oGid"><img :src="orderDetail.mainPic" alt=""></router-link>
                                            <router-link :to="'/goodsInfo/' +  orderDetail.oGid" class="title">{{ orderDetail.title}}</router-link>
                                        </div>
                                        <div class="realy-price">
                                            <span>实收款：<span class="price">￥{{orderDetail.oTotalAmount}}</span></span>
                                        </div>
                                    </div>
                                </div>
                            </Modal>
                        </div>
                    </div>
                </TabPane>
                <!-- 我买到的列表 -->
                <TabPane label="我买到的" name="name2">
                    <div class="myPublish-list" v-if="buyList==''">
                        <a-empty style="padding-top:70px;"></a-empty>
                    </div>
                    <div class="myPublish-list" v-if="buyList">
                        <div class="myPublish-item" v-for="item in buyList" :key="item.oId">
                            <!-- 订单信息 -->
                            <div class="userinfo-order">
                                <div class="userinfo">
                                    <span>订单编号：{{item.oOrderNum}}</span>
                                </div>
                                <div class="order-status" v-if="item.oOrderStatus==2">
                                    <span class="order-status">已付款</span>
                                </div>
                                <div class="order-status" v-else-if="item.oOrderStatus==1">
                                    <span class="order-status">未付款</span>
                                </div>
                            </div>
                            <!-- 商品价格区域 -->
                            <div class="goodsinfo-price">
                                <div class="goodsinfo">
                                    <router-link :to="'/goodsInfo/' + item.goods.gId"><img :src="item.mainPic" alt=""></router-link>
                                    <router-link :to="'/goodsInfo/' + item.goods.gId" class="title">{{item.goods.gTitle}}</router-link>
                                </div>
                                <div class="realy-price">
                                    <span>实收款：<span class="price">￥{{item.oTotalAmount}}</span></span>
                                </div>
                            </div>
                            <!-- 联系卖家 -->
                            <div class="info-place">
                                <router-link :to="'/addPrivateMsg/' + item.goods.gUid + '/' + item.oGid"><Icon type="ios-chatbubbles" /> 联系卖家</router-link>
                                <div class="order-place">
                                    <a  :href="'http://localhost:8080/alipay/pay?orderNo=' + item.oParentNo + '&price=' + item.oTotalAmount" class="status" v-if="item.oOrderStatus==1">去付款</a>
                                    <a href="javascript:void(0);" class="detail" @click.prevent="findMyOrderDetail(item.oId)">查看详情</a>
                                    <a href="javascript:void(0);" class="refund" @click.prevent="modal2=true" v-if="item.oOrderStatus==2">申请退款</a>
                                </div>
                            </div>
                        </div>
                        <!-- 订单详情 -->
                        <Modal
                            v-model="modal3"
                            title="订单详情">
                            <div class="order-info">
                                <h6>订单信息</h6>
                                <div class="order-detail">
                                    <p>订单编号：{{orderDetail.oOrderNum}}</p>
                                    <p>收货人：
                                        <span class="pad">{{addrDetail.raFullname}}</span>
                                        <span class="pad">{{addrDetail.raPhone}}</span>
                                        <span>{{addrDetail.raAddr}}</span>
                                    </p>
                                    <p v-if="orderDetail.oOrderStatus==2">订单状态：已付款</p>
                                    <p v-if="orderDetail.oOrderStatus==1">订单状态：未付款</p>
                                    <p>创建时间：{{orderDetail.oCreateTime | dataFormat}}</p>
                                    <p v-if="orderDetail.oPayTime!=''">支付时间：{{orderDetail.oPayTime}}</p>
                                    <p>备注信息：{{orderDetail.oRemark}}</p>
                                </div>
                            </div>
                            <div class="order-info">
                                <h6>商品信息</h6>
                                <div class="goodsinfo-price">
                                    <div class="goodsinfo">
                                        <router-link :to="'/goodsInfo/' + orderDetail.oGid"><img :src="orderDetail.mainPic" alt=""></router-link>
                                        <router-link :to="'/goodsInfo/' +  orderDetail.oGid" class="title">{{ orderDetail.title}}</router-link>
                                    </div>
                                    <div class="realy-price">
                                        <span>实收款：<span class="price">￥{{orderDetail.oTotalAmount}}</span></span>
                                    </div>
                                </div>
                            </div>
                        </Modal>
                        <!-- 申请退款表单 -->
                        <Modal
                          v-model="modal2"
                          title="退款申请"
                          @on-ok="ok"
                          @on-cancel="cancel">
                          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="top">
                              <FormItem prop="orReason">
                                  <Select v-model="formValidate.orReason"
                                  placeholder="退款原因">
                                      <Option value="错拍">错拍</Option>
                                      <Option value="不想要">不想要</Option>
                                      <Option value="其他">其他</Option>
                                  </Select>
                              </FormItem>
                              <FormItem prop="orDesc">
                                  <Input v-model="formValidate.orDesc" type="textarea"
                                  :autosize="{minRows: 5,maxRows: 12}" placeholder="退款说明" clearable/>
                              </FormItem>
                              <FormItem>
                                  <Button type="primary" @click="save('formValidate')">保存</Button>
                                  <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                              </FormItem>
                          </Form>
                        </Modal>
                    </div>
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>
export default {
  name: 'MySellOrders',
  data () {
    return {
      uId: JSON.parse(localStorage.getItem('user')).uId,
      sellList: [], // 我卖出的
      buyList: [], // 我买到的
      newBuyList: [], // 新买到的订单列表
      modal1: false,
      modal2: false,
      modal3: false,
      addrDetail: '', // 收货人地址详情
      orderDetail: '', // 订单详情
      formValidate: {
        orReason: '',
        orDesc: ''
      },
      ruleValidate: {
        orReason: [
          { required: true, message: '退款原因不能为空', trigger: 'change' }
        ],
        orDesc: [
          { required: true, message: '退款说明不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.findOrdersByuId()
    this.findAllGoods()
  },
  methods: {
    ok () {
      this.findOrdersByuId()
    },
    cancel () {
      this.findOrdersByuId()
    },
    // 根据用户id查询订单列表，得到我买到的订单商品
    findOrdersByuId () {
      this.$axios({
        url: 'orders/findOrdersByuId/',
        method: 'get',
        params: {
          uId: this.uId,
          pageNo: this.pageNumOne,
          pageSize: this.pageSize
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.buyList = res.data.pageInfo.list
          // 遍历订单，得到订单商品的主图
          this.buyList.forEach(item => {
            this.$axios({
              url: 'goodsPicture/findMainPicByGoodsId/' + item.goods.gId,
              method: 'get'
            }).then(result => {
              if (result.data.code === 200) {
                // vue给对象新增属性并触发视图更新
                this.$set(item, 'mainPic', result.data.object.gpAddress)
              }
            }).catch(error => {
              console.log(error)
            })
            // this.$axios({
            //   url: 'orders/findByParentNo/' + item.oParentNo,
            //   method: 'get'
            // }).then(result => {
            //   if (result.data.code === 200) {
            //     this.newBuyList.push(result.data.list)
            //   }
            // }).catch(error => {
            //   console.log(error)
            // })
            // console.log(this.newBuyList)
          })
        }
      })
    },
    // 根据id查询此收货地址详情
    findAddrDetail (id) {
      this.addrDetail = ''
      this.$axios({
        url: 'receiveAddress/findById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.addrDetail = res.data.object
        }
      })
    },
    // 根据用户id查看发布的商品列表，得到我卖出的订单项
    findAllGoods () {
      this.$axios({
        url: 'goods/findAllByUserId/' + this.uId,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          // 得到用户发布的商品列表，遍历，根据商品id查询订单详情
          res.data.list.forEach(item => {
            this.$axios({
              url: 'orders/findByGoodId',
              method: 'get',
              params: {
                gId: item.gId
              },
              headers: {
                Authorization: localStorage.getItem('token')
              }
            }).then(res => {
              if (res.data.code === 200) {
                if (res.data.object !== null) {
                  this.sellList.push(res.data.object)
                  this.sellList.forEach(one => {
                    this.$axios({
                      url: 'goodsPicture/findMainPicByGoodsId/' + one.oGid,
                      method: 'get'
                    }).then(result => {
                      if (result.data.code === 200) {
                        this.$set(one, 'mainPic', result.data.object.gpAddress)
                      }
                    }).catch(error => {
                      console.log(error)
                    })
                  })
                }
              }
            }).catch(error => {
              console.log(error)
            })
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据订单表id查询我卖出的订单详情
    findOrderDetail (id) {
      this.orderDetail = ''
      this.modal1 = true
      this.$axios({
        url: 'orders/findById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.orderDetail = res.data.object
          this.findAddrDetail(res.data.object.oRaid)
          this.$axios({
            url: 'goodsPicture/findMainPicByGoodsId/' + this.orderDetail.oGid,
            method: 'get'
          }).then(result => {
            if (result.data.code === 200) {
              this.$set(this.orderDetail, 'mainPic', result.data.object.gpAddress)
              this.$set(this.orderDetail, 'title', result.data.object.goods.gTitle)
            }
          }).catch(error => {
            console.log(error)
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 根据订单表id查询我买到的订单详情
    findMyOrderDetail (id) {
      this.orderDetail = ''
      this.modal3 = true
      this.$axios({
        url: 'orders/findById/' + id,
        method: 'get',
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.orderDetail = res.data.object
          this.findAddrDetail(res.data.object.oRaid)
          this.$axios({
            url: 'goodsPicture/findMainPicByGoodsId/' + this.orderDetail.oGid,
            method: 'get'
          }).then(result => {
            if (result.data.code === 200) {
              this.$set(this.orderDetail, 'mainPic', result.data.object.gpAddress)
              this.$set(this.orderDetail, 'title', result.data.object.goods.gTitle)
            }
          }).catch(error => {
            console.log(error)
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 新增退款申请
    save (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log(this.formValidate)
        }
      })
    }
  }
}
</script>

<style scoped>
/* .v-transfer-dom >>> .ivu-modal-mask {
  background-color: rgba(55,55,55,.2) !important;
} */
.pad {
    margin-right: 5px;
}
.order-info p {
    margin-bottom: 8px;
}
.order-info h6 {
    font-size: 15px;
}
.order-detail {
    padding: 10px;
}
.realy-price {
    font-size: 13px;
}
.userinfo-order span {
    font-size: 13px;
}
.page-all{
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.myPublish-container {
    min-height: 480px;
}
.myPublish-info {
    margin-top: 50px;
}
.myPublish-item {
    margin: 5px 5px 10px 5px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 4px #b8b8b8;
}
.userinfo-order {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.userinfo {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
.userinfo a {
    display: block;
}
.userinfo img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}
.userinfo .nickName {
    font-size: 12px;
    color: #515a6e;

}
.order-status {
    color: #ef4238;
    font-size: 12px;
}
.goodsinfo-price {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8eaec;
    padding-bottom: 8px;
}
.goodsinfo {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    max-width: 83%;
}
.goodsinfo a {
    display: block;
    color:#515a6e;
    font-size: 14px;
}
.goodsinfo .title {
    display: block;
    color:#515a6e;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    font-size: 14px;
}
.goodsinfo img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;
}
.price {
    font-size: 13px;
    color:#ef4238;
}
.info-place {
    width: 100%;
    padding: 6px 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.order-place {
    width: 200px;
}
.order-place .status {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 15px;
    border:1px solid #ef4238;
    color:#ef4238;
    margin-right: 10px;
    font-size: 11px;
}
.order-place .detail {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 15px;
    border:1px solid #28a7f1;
    color:#28a7f1;
    margin-right: 10px;
    font-size: 11px;
}
.refund {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 15px;
    background: #ef4238;
    color:#fff;
    margin-right: 10px;
    font-size: 11px;
}
.ivu-dropdown-rel a {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    line-height: 20px;
    text-align: center;
    color:#515a6e;
    border:1px solid #515a6e;
}
</style>
